<template>
  <el-row>
    <el-card>
      <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item :label="$t('collectionManagement.report.data.productType')">
          <el-select v-model="searchForm.orderType" :placeholder="$t('collectionManagement.report.prompt.select')">
            <el-option
              v-for="item in $t('collectionManagement.report.type')"
              :key="item.value"
              :label="item.desc"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('collectionManagement.report.data.LoanAmount')">
          <el-select v-model="searchForm.loanAmountJudgeFlag" :placeholder="$t('collectionManagement.report.prompt.select')">
            <el-option
              v-for="item in $t('collectionManagement.report.operator')"
              :key="item.value"
              :label="item.desc"
              :value="item.value"
            />
          </el-select>
          <el-input-number
            v-model="searchForm.loanAmount"
            controls-position="right"
            :step="1"
            :max="10000000000"
            :placeholder="$t('collectionManagement.report.data.unit')"
            style="margin-left: 10px"
          />
        </el-form-item>
        <el-form-item :label="$t('collectionManagement.report.data.loanTerm')">
          <el-select v-model="searchForm.loanTermsJudgeFlag" :placeholder="$t('collectionManagement.report.prompt.select')">
            <el-option
              v-for="item in $t('collectionManagement.report.operator')"
              :key="item.value"
              :label="item.desc"
              :value="item.value"
            />
          </el-select>
          <el-input-number
            v-model="searchForm.loanTerms"
            controls-position="right"
            :step="1"
            :max="100000"
            :placeholder="$t('collectionManagement.report.data.day')"
            style="margin-left: 10px"
          />
        </el-form-item>
        <el-row>
          <el-button type="primary" @click="search">
            {{ $t('common.search') }}
          </el-button>
          <el-button @click="reset">
            {{ $t('common.reset') }}
          </el-button>
          <el-button @click="exportData">
            {{ $t('common.ex') }}
          </el-button>
        </el-row>
      </el-form>
    </el-card>
    <el-card v-loading="loading">
      <table>
        <tr>
          <td>{{ statement['currentOughtRepayCount'] }}</td>
          <td>{{ statementData && statementData['currentOughtRepayCount'] ? statementData['currentOughtRepayCount'] : 0 }}</td>
          <td>{{ statement['currentOughtRepayAmount'] }}</td>
          <td>{{ statementData && statementData['currentOughtRepayAmount'] ? statementData['currentOughtRepayAmount'] : 0 }}</td>
          <td>{{ statement['currentPayMoneyAmount'] }}</td>
          <td>{{ statementData && statementData['currentPayMoneyAmount'] ? statementData['currentPayMoneyAmount'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['currentOverdueCount'] }}</td>
          <td>{{ statementData && statementData['currentOverdueCount'] ? statementData['currentOverdueCount'] : 0 }}</td>
          <td>{{ statement['currentOverdueRepayAmount'] }}</td>
          <td>{{ statementData && statementData['currentOverdueRepayAmount'] ? statementData['currentOverdueRepayAmount'] : 0 }}</td>
          <td>{{ statement['currentOverduePaymentAmount'] }}</td>
          <td>{{ statementData && statementData['currentOverduePaymentAmount'] ? statementData['currentOverduePaymentAmount'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['currentOverdueBetween0To3Count'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween0To3Count'] ? statementData['currentOverdueBetween0To3Count'] : 0 }}</td>
          <td>{{ statement['currentOverdueBetween0To3Amount'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween0To3Amount'] ? statementData['currentOverdueBetween0To3Amount'] : 0 }}</td>
          <td>{{ statement['currentOverdueBetween0To3principal'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween0To3principal'] ? statementData['currentOverdueBetween0To3principal'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['currentOverdueBetween4To10Count'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween4To10Count'] ? statementData['currentOverdueBetween4To10Count'] : 0 }}</td>
          <td>{{ statement['currentOverdueBetween4To10Amount'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween4To10Amount'] ? statementData['currentOverdueBetween4To10Amount'] : 0 }}</td>
          <td>{{ statement['currentOverdueBetween4To10principal'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween4To10principal'] ? statementData['currentOverdueBetween4To10principal'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['currentOverdueBetween11To30Count'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween11To30Count'] ? statementData['currentOverdueBetween11To30Count'] : 0 }}</td>
          <td>{{ statement['currentOverdueBetween11To30Amount'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween11To30Amount'] ? statementData['currentOverdueBetween11To30Amount'] : 0 }}</td>
          <td>{{ statement['currentOverdueBetween11To30principal'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween11To30principal'] ? statementData['currentOverdueBetween11To30principal'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['currentOverdueBetween31To90Count'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween31To90Count'] ? statementData['currentOverdueBetween31To90Count'] : 0 }}</td>
          <td>{{ statement['currentOverdueBetween31To90Amount'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween31To90Amount'] ? statementData['currentOverdueBetween31To90Amount'] : 0 }}</td>
          <td>{{ statement['currentOverdueBetween31To90principal'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween31To90principal'] ? statementData['currentOverdueBetween31To90principal'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['currentOverdueBetween91ToMaxCount'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween91ToMaxCount'] ? statementData['currentOverdueBetween91ToMaxCount'] : 0 }}</td>
          <td>{{ statement['currentOverdueBetween91ToMaxAmount'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween91ToMaxAmount'] ? statementData['currentOverdueBetween91ToMaxAmount'] : 0 }}</td>
          <td>{{ statement['currentOverdueBetween91ToMaxprincipal'] }}</td>
          <td>{{ statementData && statementData['currentOverdueBetween91ToMaxprincipal'] ? statementData['currentOverdueBetween91ToMaxprincipal'] : 0 }}</td>
        </tr>
      </table>
      <table style="margin-top: 20px">
        <tr>
          <td>{{ statement['currentMonthFinishedCount'] }}</td>
          <td>{{ statementData && statementData['currentMonthFinishedCount'] ? statementData['currentMonthFinishedCount'] : 0 }}</td>
          <td>{{ statement['currentMonthFinishedAmount'] }}</td>
          <td>{{ statementData && statementData['currentMonthFinishedAmount'] ? statementData['currentMonthFinishedAmount'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['oughtRepayFinishedCount'] }}</td>
          <td>{{ statementData && statementData['oughtRepayFinishedCount'] ? statementData['oughtRepayFinishedCount'] : 0 }}</td>
          <td>{{ statement['oughtRepayFinishedAmont'] }}</td>
          <td>{{ statementData && statementData['oughtRepayFinishedAmont'] ? statementData['oughtRepayFinishedAmont'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['overdueRepayFinishedCount'] }}</td>
          <td>{{ statementData && statementData['overdueRepayFinishedCount'] ? statementData['overdueRepayFinishedCount'] : 0 }}</td>
          <td>{{ statement['overdueRepayFinishedAmont'] }}</td>
          <td>{{ statementData && statementData['overdueRepayFinishedAmont'] ? statementData['overdueRepayFinishedAmont'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['overdueRepayFinishedIn0To3Count'] }}</td>
          <td>{{ statementData && statementData['overdueRepayFinishedIn0To3Count'] ? statementData['overdueRepayFinishedIn0To3Count'] : 0 }}</td>
          <td>{{ statement['overdueRepayFinishedIn0To3Amont'] }}</td>
          <td>{{ statementData && statementData['overdueRepayFinishedIn0To3Amont'] ? statementData['overdueRepayFinishedIn0To3Amont'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['overdueRepayFinishedIn4To10Count'] }}</td>
          <td>{{ statementData && statementData['overdueRepayFinishedIn4To10Count'] ? statementData['overdueRepayFinishedIn4To10Count'] : 0 }}</td>
          <td>{{ statement['overdueRepayFinishedIn4To10Amont'] }}</td>
          <td>{{ statementData && statementData['overdueRepayFinishedIn4To10Amont'] ? statementData['overdueRepayFinishedIn4To10Amont'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['overdueRepayFinishedIn11To30Count'] }}</td>
          <td>{{ statementData && statementData['overdueRepayFinishedIn11To30Count'] ? statementData['overdueRepayFinishedIn11To30Count'] : 0 }}</td>
          <td>{{ statement['overdueRepayFinishedIn11To30Amont'] }}</td>
          <td>{{ statementData && statementData['overdueRepayFinishedIn11To30Amont'] ? statementData['overdueRepayFinishedIn11To30Amont'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['overdueRepayFinishedIn31To90Count'] }}</td>
          <td>{{ statementData && statementData['overdueRepayFinishedIn31To90Count'] ? statementData['overdueRepayFinishedIn31To90Count'] : 0 }}</td>
          <td>{{ statement['overdueRepayFinishedIn31To90Amont'] }}</td>
          <td>{{ statementData && statementData['overdueRepayFinishedIn31To90Amont'] ? statementData['overdueRepayFinishedIn31To90Amont'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['overdueRepayFinishedIn91ToMaxCount'] }}</td>
          <td>{{ statementData && statementData['overdueRepayFinishedIn91ToMaxCount'] ? statementData['overdueRepayFinishedIn91ToMaxCount'] : 0 }}</td>
          <td>{{ statement['overdueRepayFinishedIn91ToMaxAmont'] }}</td>
          <td>{{ statementData && statementData['overdueRepayFinishedIn91ToMaxAmont'] ? statementData['overdueRepayFinishedIn91ToMaxAmont'] : 0 }}</td>
        </tr>
        <tr>
          <td>{{ statement['currentDayFinishedCount'] }}</td>
          <td>{{ statementData && statementData['currentDayFinishedCount'] ? statementData['currentDayFinishedCount'] : 0 }}</td>
          <td>{{ statement['currentDayFinishedAmount'] }}</td>
          <td>{{ statementData && statementData['currentDayFinishedAmount'] ? statementData['currentDayFinishedAmount'] : 0 }}</td>
        </tr>
      </table>
    </el-card>
  </el-row>
</template>

<script>
import { getStatement, exportStatement } from '@/api/collection'
export default {
  name: 'Report',
  data() {
    return {
      loading: true,
      statementData: [],
      statement: {},
      searchForm: this.params()
    }
  },
  mounted() {
    this.statement = this.$t('collectionManagement.report.statement')
    this.getData()
  },
  methods: {
    params() {
      return {
        orderType: '',
        loanTermsJudgeFlag: null,
        loanTerms: null,
        loanAmountJudgeFlag: null,
        loanAmount: null,
        userGrade: null
      }
    },
    search() {
      this.getData()
    },
    reset() {
      this.searchForm = this.params()
      this.getData()
    },
    exportData() {
      exportStatement(this.searchForm)
    },
    getData() {
      this.loading = true
      getStatement(this.searchForm)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.statementData = res.data
            this.totalNumber = res.page ? res.page['totalNumber'] : 0
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card{
  margin: 10px;
}
table{
  width: 100%;
  border-collapse: collapse;
  tr{
    width: 100%;
    text-align: center;
    td{
      height: 50px;
      border: 1px #cccccc solid;
    }
  }
}
table:first-child{
  td{
    min-width: 10%;
  }
}
table:last-child{
  td{
    min-width: 10%;
  }
}
</style>
